<template lang="html">
  <div class="">
    <ul class="team-list" v-if="teamList && teamList.length">
      <li
        class="flex-display flex-display-column"
        v-for="(item, index) in teamList"
        :key="index"
      >
        <div class="tit flex-display flex-center-align">
          <span>ID:{{item.id}}</span>
          <p class="flex-num-one flex-display flex-right-pack">
            <span>注册时间</span>
            {{item.regdate}}
          </p>
        </div>
        <div class="info flex-display flex-center-align">
          <div class="info_icon flex-display flex-center-align">
            <img :src="item.headimgurl" />
          </div>
          <div class="flex-display flex-display-column info_name">
            <span>{{item.nickname}}</span>
            <font>{{item.level}}</font>
          </div>
          <div class="flex-display flex-display-column transfer-btn" @click="clickTurnBtn(item.id)">
            <img class="max" src="/static/modules/transfer/team_icom_transfer@2x.png">
          </div>
        </div>
        <div class="flex-num-one cout flex-display flex-center-align flex-center-pack">
          <span>直属下级:{{item.lowerCount}}</span>
          <span class="count-span">团队人数:{{item.teamCount}}</span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import api from "@/fetch/api";
import { findUserList } from '@/api/transfer'
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      teamOriginalList: [],
      teamList: [],
    }
  },
  created() {

    console.log(this.teamOriginalList)
  },
  methods: {
    clickTurnBtn(id) {
      this.$emit('getTurnUserId', id);
    },
    initOriginalList() {
      this.teamList = []
    },
    findList(name) {
      findUserList({
        uid: this.getUserInfo().id,
        name: name,
      }).then(res=>{
        console.log(res)
        if(res.code == 1){
          Toast(res.msg);
          this.initOriginalList()
          return
        }
        this.teamOriginalList = res.data;
        this.teamOriginalList.forEach(item => {
          this.fnGeTeamCount(item);
          this.fnGeLowerCount(item);
        });
        setTimeout(()=>{
          this.teamList = this.teamOriginalList;
        }, 100)
      })
    },
    /**
     * @author yang
     * @desc 获取团队总人数
     * @param {Object} _item 当前下级的数据
     */
    fnGeTeamCount(_item) {
      let params = {
        id: _item ? _item.id : this.getUserInfo().id
      };
      api.getmyteam(params).catch(result => {
        if (result.status == 200) {
          _item
            ? (_item.teamCount = result.data.msg)
            : (this.teamCount = result.data.msg);
        }
      });
    },
    /**
     * @author yang
     * @desc 获取直属下级人数
     * @param {Object} _item 当前下级的数据
     */
    fnGeLowerCount(_item) {
      let params = {
        id: _item ? _item.id : this.getUserInfo().id
      };
      api.getnextteam(params).catch(result => {
        if (result.status == 200) {
          _item
            ? (_item.lowerCount = result.data.msg)
            : (this.lowerCount = result.data.msg);
        }
      });
    },
  }
}
</script>

<style lang="scss" scoped>
.team-list {
  width: 100%;
  height: auto;
  padding: 0 15px;
  li {
    width: 100%;
    height: 170px;
    margin-top: 20px;
    background: #fff;
    .tit {
      height: 40px;
      padding: 0 15px;
      border-bottom: 1px solid rgba(238, 238, 238, 1);
      span {
        font-weight: 500;
      }
      p > span {
        color: rgba(153, 153, 153, 1);
        margin-right: 6px;
      }
    }
    .info {
      height: 80px;
      padding: 0 15px;
      position: relative;
      .info_icon {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        border: 1px solid rgba(191, 191, 191, 1);
        margin-right: 8px;
        img {
          width: 100%;
          height: 100%;
          display: block;
          border-radius: 50%;
        }
      }
      .info_name {
        font-size: 16px;
        font {
          display: inline-block;
          width: 85px;
          height: 15px;
          color: #4e3609;
          text-align: center;
          font-size: 10px;
          background: url("/static/ethel_img/team/my_img_partner@.png") center
            center no-repeat;
          background-size: 100% 100%;
          margin-top: 8px;
          line-height: 15px;
        }
      }
      .transfer-btn{
        width: .9rem;
        position: absolute;
        right: .6rem;
        top: 50%;
        margin-top: -.4rem;
      }
    }
    .cout {
      padding: 0 15px;
      font-size: 12px;
      color: rgba(102, 102, 102, 1);
      display: inline-block;
      position: relative;
      line-height: 38px;
      span:first-child {
        margin-right: 20px;
      }
      .count-span {
        display: inline-block;
        padding-left: 20px;
        border-left: 1px solid rgba(191, 191, 191, 1);
      }
      button {
        outline: none;
        border: none;
        background: rgba(188, 149, 92, 1);
        width: auto;
        display: inline-block;
        height: 25px;
        line-height: 25px;
        font-size: 14px;
        text-align: center;
        color: #fff;
        border-radius: 13px;
        right: 15px;
        position: absolute;
        top: 6px;
      }
    }
  }
}
</style>
